import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, ScrollView } from '@tarojs/components'
import { AtActivityIndicator } from 'taro-ui'
import { post } from '../../service/api'
import './index.scss'



class Company extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      companyList: [],
      pageNo: 1,
      loading: true,
      total: 0
    }
  }
  config = {
    navigationBarTitleText: '装修公司',
  }
  async getCompanyList() {
    const { pageNo, companyList } = this.state, { data } = await post('company/findPageList', {
      pageNo,
    })
    if (data.code == 0) {
      this.setState({
        companyList: companyList.concat(data.rows),
        loading: true,
        total: data.total
      }, () => {
        if (data.rows.length >= data.total) {
          this.setState({
            loading: false
          })
        }
      })
    }
  }
  onScrollToLower() {
    let { companyList, pageNo, total } = this.state;
    if (companyList.length < total) {
      pageNo += 1;
      this.setState({
        pageNo,
      }, () => {
        this.getCompanyList()
      })
    } else {
      this.setState({
        loading: false
      })
    }

  }
  toPageDetail(item) {
    Taro.navigateTo({ url: `/pages/companyDetail/index?id=${item.id}` })
  }
  componentDidMount() {

    this.getCompanyList()
  }
  render() {
    const { companyList, loading } = this.state;
    return (

      <ScrollView className="c-list" scrollY scrollWithAnimation lowerThreshold='30'
        onScrollToLower={this.onScrollToLower.bind(this)}>
        {companyList.map((item) => {
          return (
            <View className="c-item" key={item.id} onClick={this.toPageDetail.bind(this, item)}>
              <Image className="c-img-logo" src={item.logo} />
              <View className="c-item-right">
                <View className="c-item-title">{item.name}</View>
                <View className="c-item-sub">
                  <View className="c-item-address">所在区域：{item.dist}</View>
                  <View className="c-item-fa">所有方案：<Text className="color">{item.fasNum}套</Text></View>
                </View>
              </View>
            </View>
          )
        })}
        {loading && <View className="loading"><AtActivityIndicator mode='normal' color="#FFAE34" content='加载中...'></AtActivityIndicator></View>}
      </ScrollView>
    )
  }
}

export default Company
